<template>
	<div>
		<ul>
			<li v-for="(item, index) in Orderlist" :key="index">
				<div class="flex_column">
					<div class="Title_Box">
						<h3>{{ item.title }}</h3>
						<!-- 状态类型：配送中、已签收、已完成、已取消 -->
						<span>{{ item.status }}</span>
					</div>
					<div class="Info_Box">
						<div class="Pic_Box">
							<img :src="item.pic" alt="" />
						</div>
						<div class="Text_Box">
							<p>{{ item.text }}</p>
							<p>{{ item.time }}</p>
							<p>
								总价：￥<span>{{ item.price }}</span>
							</p>
						</div>
					</div>
					<div class="Botton_Box">
						<!-- 按钮类型：再次下单、晒单、查看详情 -->
						<button @click="jumpBuyIngredients">再次下单</button>
						<button @click="jumpOrderIngredientsIndex">查看详情</button>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name: 'UserOrderListInfo',
	data() {
		return {
			Orderlist: [
				{
					title: '标题或店名',
					status: '状态',
					pic: require('@/assets/images/今日推荐.jpg'),
					text: '商品名称商品名称商品名称商品名称',
					time: '时间时间时间间时间间时间间时间间时间',
					price: '202.00',
				},
				{
					title: '标题或店名',
					status: '状态',
					pic: require('@/assets/images/今日推荐.jpg'),
					text: '商品名称商品名称商品名称商品名称',
					time: '时间时间时间间时间间时间间时间间时间',
					price: '202.00',
				},
				{
					title: '标题或店名',
					status: '状态',
					pic: require('@/assets/images/今日推荐.jpg'),
					text: '商品名称商品名称商品名称商品名称',
					time: '时间时间时间间时间间时间间时间间时间',
					price: '202.00',
				},
				{
					title: '标题或店名',
					status: '状态',
					pic: require('@/assets/images/今日推荐.jpg'),
					text: '商品名称商品名称商品名称商品名称',
					time: '时间时间时间间时间间时间间时间间时间',
					price: '202.00',
				},
			],
		};
	},
	methods: {
		jumpBuyIngredients() {
			this.$router.push('/ConfirmOrder');
		},
		jumpOrderIngredientsIndex() {
			this.$router.push('/OrderIngredients');
		},
	},
};
</script>

<style scoped>
.flex_column {
	display: flex;
	flex-direction: column;
	height: auto;
	margin: 10px 26px 12px 26px;
	padding: 15px 20px 16px 22px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	box-sizing: border-box;
}

/* 标题、状态begin */
.Title_Box {
	display: flex;
	padding: 0 0 10px 0;
	justify-content: space-between;
	border-bottom: 1px solid #f2f2f2;
}
.Title_Box h3 {
	font-size: 18px;
	line-height: 24px;
}
.Title_Box span {
	font-size: 14px;
	line-height: 24px;
	color: #aaa;
	font-weight: 0;
}
/* 标题、状态end */

/* 图片、文字begin */
.Info_Box {
	display: flex;
	justify-content: space-between;
	padding: 0 0 10px 0;
	margin-top: 10px;
}
.Info_Box .Pic_Box {
	flex: 1;
	margin-right: 10px;
}
.Info_Box .Pic_Box img {
	width: 100%;
	border-radius: 10px;
}
.Info_Box .Text_Box {
	width: 0;
	flex: 3;
}
/* 只能一行显示，不换行 */
.Info_Box .Text_Box p {
	font-size: 12px;
	line-height: 24px;
	color: #777;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 图片、文字end */
/* 按钮begin */
.Botton_Box {
	display: flex;
	justify-content: flex-end;
}
.Botton_Box button {
	margin-left: 10px;
	padding: 0 10px;
	font-size: 12px;
	line-height: 24px;
	color: #777;
	border: 1px solid #f2f2f2;
	outline: none;
	border-radius: 10px;
	background-color: #fff;
}
/* 按钮end */
</style>
